<template>
  <a-modal v-model:open="show"
           title=""
           @cancel="handleOk"
           :footer="null"
           width="100%"
           wrapClassName="full-modal"
           :mask="false"
  >
    <template #closeIcon>
      <CloseOutlined style="color: #000"/>
    </template>
    <div id="content">
      <iframe :src="preViewUrl"/>
    </div>
  </a-modal>
</template>
<script setup lang="ts">

import * as CryptoJS from 'crypto-js';
import {computed, watch, ref, defineComponent} from "vue";
import {CloseOutlined} from '@ant-design/icons-vue'
import {getPreViewUrl} from '@/api/disk/disk.ts'
defineComponent({
  CloseOutlined
})
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  preViewFile:{
    type:Object,
    default: ()=>{
      return null
    }
  }
})
const emits = defineEmits(['close'])
const show = computed(()=>props.show)
const preViewFile = computed(()=>props.preViewFile)
const preViewUrl = ref('')
const handleOk = ()=>{
  preViewUrl.value = ''
  emits('close',false)
}
const queryPreViewUrl = (id)=>{
  getPreViewUrl({id}).then((res:any)=>{

    preViewUrl.value = import.meta.env.VITE_PREVIEW_SERVICE +"?url="+
        encodeURIComponent( CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(res.result)))
  })
}
watch(()=>show.value,(value)=>{
  if(value){
    queryPreViewUrl(preViewFile.value.id)
  }
})

</script>
<style scoped lang="scss">

#content{
  width: 100%;
  height: 100vh;
  iframe{
    width: 100%;
    height: 100%;
  }
}
:deep( .ant-modal-content){
  background-color: transparent;
}
</style>
